﻿
@page "/rich-text-editor/image"

@using Syncfusion.Blazor.RichTextEditor

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates the option to insert the image to the Rich Text Editor content. Click the image button from the toolbar item to insert the image.</p>
</SampleDescription>
<ActionDescription>
   <p>Image tools are used to insert an image to the Rich Text Editor and click on the image to easily customize the image using quick toolbar. The quick toolbar has the following items
       <ul> <li><code>Replace</code> - To replace the image with some other image.</li>
            <li><code>Align</code> -Align the image with left, right and justify.</li>
            <li><code>Image captions</code> - Set the captions for the image.</li>
            <li><code>Change size</code> - Modify width and height of the image.</li>
            <li><code>Delete</code> - Delete the image.</li>
            <li><code>Link </code> - Provide the link to the image.</li>
            <li><code>Display</code> - Display the image as inline or with break.</li>
            <li><code>Alternate text</code> - Provide the alternative text for the image if the image is not present in the location.</li>
            <li><code>Custom Tools</code> – 'rotation' related commands are added as custom commands to the image element</li>
            <li><code>Resize</code> – To resize the image dimension with resize options.</li>
        </ul>
    Quick commands are opened as context-menu on clicking the corresponding element. The commands must be passed as string collection to image, text, and link attributes of the <code>QuickToolbarSettings</code> property.</p>
</ActionDescription>

<div class="control-section">
    <div class="control-wrapper">
        <div class="control-section">
            <SfRichTextEditor>
                <p>Rich Text Editor allows inserting images from online sources as well as the local computers where you want to insert the image in your content.</p>
                <p><b>Get started Quick Toolbar to click on the image</b></p>
                <p>It is possible to add custom style on the selected image inside the Rich Text Editor through the quick toolbar.</p>
                <img alt='Logo' style='width: 300px; height: 300px; transform: rotate(0deg);' src='images/rich-text-editor/rte-image-feather.png' />
                <RichTextEditorQuickToolbarSettings Image="@ImageTools" />
            </SfRichTextEditor>
        </div>
    </div>
</div>

<style>
    .e-rte-quick-popup .e-rte-quick-toolbar .e-rotate-left::before {
        content: "\e341";
    }

    .e-rte-quick-popup .e-rte-quick-toolbar .e-rotate-right::before {
        content: "\e354";
    }

    .bootstrap4 .e-rte-quick-popup .e-rte-quick-toolbar .e-rotate-left::before {
        content: "\e752";
    }

    .bootstrap4 .e-rte-quick-popup .e-rte-quick-toolbar .e-rotate-right::before {
        content: "\e778";
    }
    
    .tailwind .e-rte-quick-popup .e-rte-quick-toolbar .e-rotate-left::before {
        content: "\e7bd";
    }
    
    .tailwind .e-rte-quick-popup .e-rte-quick-toolbar .e-rotate-right::before {
        content: "\e7b9";
    }
</style>

@code {
    private List<ImageToolbarItemModel> ImageTools = new List<ImageToolbarItemModel>()
    {
        new ImageToolbarItemModel() { Command = ImageToolbarCommand.Replace },
        new ImageToolbarItemModel() { Command = ImageToolbarCommand.Align },
        new ImageToolbarItemModel() { Command = ImageToolbarCommand.Caption },
        new ImageToolbarItemModel() { Command = ImageToolbarCommand.Remove },
        new ImageToolbarItemModel() { Command = ImageToolbarCommand.HorizontalSeparator },
        new ImageToolbarItemModel() { Command = ImageToolbarCommand.InsertLink },
        new ImageToolbarItemModel() { Command = ImageToolbarCommand.Display },
        new ImageToolbarItemModel() { Command = ImageToolbarCommand.AltText },
        new ImageToolbarItemModel() { Command = ImageToolbarCommand.Dimension }
    };
}